<template>
  <div class="docs">
    <div class="edit-header">
      <h2>{{ title }}</h2>
      <span>{{ stitle }}</span>
      <div class="edit-pen">
        <n-icon size="40">
          <game-controller-outline />
        </n-icon>
      </div>
    </div>
    <div class="post-body animated fadeInDown">
      <h3 id="Elegant-and-Powerful-Theme-for-Hexo"><a href="#Elegant-and-Powerful-Theme-for-Hexo" class="headerlink"
          title="Elegant and Powerful Theme for Hexo" data-pjax-state=""></a>Elegant and Powerful Theme for Hexo</h3>
      <p>Theme NexT has the following features:</p>
      <ul>
        <li>No jQuery.</li>
        <li>Support <a href="https://caniuse.com/prefers-color-scheme" rel="noopener external nofollow noreferrer"
            target="_blank" class="exturl" title="">native dark mode<i class="fa fa-external-link-alt"></i></a>.</li>
        <li>Support Pjax to deliver a fast browsing experience.</li>
        <li>Integrated KaTeX and MathJax mathematical formula rendering.</li>
        <li>Integrated PDF.js and mermaid diagram.</li>
        <li>Support Disqus, Changyan, LiveRe, Gitalk, Utterances and Isso comment systems.</li>
        <li>Support a large number of third-party statistics and content sharing services.</li>
        <li>Easy to customize content or modify style.</li>
      </ul>
      <h3 id="Four-Schemes-in-One"><a href="#Four-Schemes-in-One" class="headerlink" title="Four Schemes in One"
          data-pjax-state=""></a>Four Schemes in One</h3>
      <p>By using different Schemes in NexT, you can simply change the style of your blog, and nearly all options can be
        used in all schemes.</p>
      <div class="image-comparison-container">
        <img class="image-comparison medium-zoom-image" src="../images/next-schemes.png" alt="NexT Schemes">
        <img class="image-comparison medium-zoom-image" src="../images/next-schemes-dark.png" alt="NexT Schemes">
      </div>

      <h3 id="Multilingual-Support"><a href="#Multilingual-Support" class="headerlink" title="Multilingual Support"
          data-pjax-state=""></a>Multilingual Support</h3>
      <p>Thanks to the contribution of our users and developers, <a
          href="/docs/theme-settings/internationalization.html#Choosing-Language" data-pjax-state="">NexT now supports
          over 20 languages</a>.</p>
      <div class="group-picture">
        <div class="group-picture-row">
          <div class="group-picture-column"><img src="../images/en.png" alt="English translation" loading="lazy"
              class="medium-zoom-image"></div>
        </div>
        <div class="group-picture-row">
          <div class="group-picture-column"><img src="../images/cn.png" alt="Chinese translation" loading="lazy"
              class="medium-zoom-image"></div>
          <div class="group-picture-column"><img src="../images/ru.png" alt="Russian translation" loading="lazy"
              class="medium-zoom-image"></div>
        </div>
      </div>

      <h3 id="Code-Highlighting-Themes"><a href="#Code-Highlighting-Themes" class="headerlink"
          title="Code Highlighting Themes" data-pjax-state=""></a>Code Highlighting Themes</h3>
      <div v-html="ThemesHtml"></div>
      <!-- Inspired by https://github.com/sindresorhus/css-in-readme-like-wat -->
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th align="center">Tomorrow</th>
              <th align="center">Tomorrow Night</th>
              <th align="center">Tomorrow Night Eighties</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td align="center"><img src="../images/tomorrow.svg" alt="Tomorrow" loading="lazy"
                  class="medium-zoom-image"></td>
              <td align="center"><img src="../images/tomorrow-night.svg" alt="Tomorrow Night" loading="lazy"
                  class="medium-zoom-image"></td>
              <td align="center"><img src="../images/tomorrow-night-eighties.svg" alt="Tomorrow Night Eighties"
                  loading="lazy" class="medium-zoom-image"></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th align="center">Tomorrow Night Blue</th>
              <th align="center">Tomorrow Night Bright</th>
              <th align="center">Default</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td align="center"><img src="../images/tomorrow-night-blue.svg" alt="Tomorrow Night Blue" loading="lazy"
                  class="medium-zoom-image"></td>
              <td align="center"><img src="../images/tomorrow-night-bright.svg" alt="Tomorrow Night Bright"
                  loading="lazy" class="medium-zoom-image"></td>
              <td align="center"><img src="../images/default.svg" alt="Default" loading="lazy"
                  class="medium-zoom-image">
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <h3 id="Supported-Browsers"><a href="#Supported-Browsers" class="headerlink" title="Supported Browsers"
          data-pjax-state=""></a>Supported Browsers</h3>
      <p>We design NexT to support the latest web browsers. We support the current versions of Chrome, Firefox, Safari,
        and Microsoft Edge. Many CSS3 and ES6 features are used in theme NexT, including CSS Variables, Destructuring
        assignment, Arrow functions and Spread operator.</p>
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>Browser</th>
              <th>Supported versions</th>
              <th>Release date</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><i class="fab fa-internet-explorer fa-2x"></i> IE</td>
              <td>N/A</td>
              <td>Oct 17, 2013</td>
            </tr>
            <tr>
              <td><i class="fab fa-chrome fa-2x"></i> Chrome</td>
              <td>60+</td>
              <td>Jul 25, 2017</td>
            </tr>
            <tr>
              <td><i class="fab fa-firefox-browser fa-2x"></i> Firefox</td>
              <td>55+</td>
              <td>Aug 8, 2017</td>
            </tr>
            <tr>
              <td><i class="fab fa-opera fa-2x"></i> Opera</td>
              <td>47+</td>
              <td>Aug 9, 2017</td>
            </tr>
            <tr>
              <td><i class="fab fa-safari fa-2x"></i> Safari</td>
              <td>11+</td>
              <td>Sep 19, 2017</td>
            </tr>
            <tr>
              <td><i class="fab fa-edge fa-2x"></i> Edge</td>
              <td>80+</td>
              <td>Feb 7, 2020</td>
            </tr>
          </tbody>
        </table>
      </div>
      <p>Some other new Web APIs, such as <a href="https://caniuse.com/intersectionobserver"
          rel="noopener external nofollow noreferrer" target="_blank" class="exturl" title="">IntersectionObserver<i
            class="fa fa-external-link-alt"></i></a> and <a href="https://caniuse.com/fetch"
          rel="noopener external nofollow noreferrer" target="_blank" class="exturl" title="">Fetch API<i
            class="fa fa-external-link-alt"></i></a>, are used by NexT plugins. They are not core functions of NexT, so
        we have no plans to make them compatible with legacy browsers.</p>
      <p>In addition, <a href="https://caniuse.com/css-sticky" rel="noopener external nofollow noreferrer"
          target="_blank" class="exturl" title="">CSS position: sticky<i class="fa fa-external-link-alt"></i></a> is
        used for sidebar positioning. On browsers that do not support this property, its fallback style
        <code>position: static</code> will be used.
      </p>
      <h3 id="Customize-Your-NexT"><a href="#Customize-Your-NexT" class="headerlink" title="Customize Your NexT"
          data-pjax-state=""></a>Customize Your NexT</h3>
      <p>NexT have flexible but simple options, and you can make your own blog with built-in third-party support. Now
        let's <a href="/docs/getting-started/" data-pjax-state="">get started</a>.</p>

    </div>
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue'
import { GameControllerOutline } from '@vicons/ionicons5'
import "animate.css";


const title = 'Documentation'
const stitle = 'NexT User Docs'

const ThemesHtml = ref(`
<p>NexT uses code highlighting themes from the <a href="https://highlightjs.org/" rel="noopener external nofollow noreferrer" target="_blank" class="exturl" title="">Highlight.js<i class="fa fa-external-link-alt"></i></a> and <a href="https://prismjs.com/" rel="noopener external nofollow noreferrer" target="_blank" class="exturl" title="">Prism<i class="fa fa-external-link-alt"></i></a> package, and makes <a href="/docs/theme-settings/miscellaneous.html#Codeblock-Style" data-pjax-state="">more than 300 themes</a> available to you.</p>
`)

</script>

<style lang="scss" scoped>
.docs {
  background-color: var(--theme-content-color);
  padding: 30px 20px;
}

.edit-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  .edit-pen {
    position: absolute;
    top: 0;
    right: 0;
  }
}

.post-body {
  font-size: 1.125em;
  line-height: 2;

  h3 {
    border-bottom: 1px dotted #000;
    margin: 30px 0 15px;
  }

  p {
    margin: 0 0 20px;
  }

  ul {
    li {
      list-style: inside;
      overflow-wrap: break-word;
    }
  }

  .group-picture {
    margin-bottom: 20px;

    .group-picture-row {
      display: flex;
      gap: 3px;
      margin-bottom: 3px;

      .group-picture-column {
        flex: 1;

        img {
          margin: 0;
          object-fit: cover;
          width: 100%;
          height: 100%;
        }

      }
    }
  }

  a {
    border-bottom: 1px solid #000;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.875em;
    margin-bottom: 20px;

    th {
      font-weight: 700;
      padding-bottom: 10px;
    }

    th,
    td {
      padding: 8px;
      border: 1px solid #ddd;
      border-bottom: 3px solid #ddd;
    }
  }
}

.image-comparison-container {
  position: relative;
}

.image-comparison {
  opacity: 1 !important;
}

@keyframes next-clip-path {
  from {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }

  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

.image-comparison:last-of-type {
  animation: next-clip-path 8s alternate ease-in-out infinite;
  position: absolute;
  top: 0;
}
</style>